<template>
   <div class="indextabbar">
      <ul>
           <li @click="tabbarclick(0)"><div class="indextabbardiv"><p class="yl-tab-home indextabbaricon" :class="{active:indextabbarselected==0}"></p><p class="indextabbartitle" :class="{active:indextabbarselected==0}">首页</p></div></li>
           <li @click="tabbarclick(1)"><div class="indextabbardiv"><p class="yl-tab-find indextabbaricon" :class="{active:indextabbarselected==1}"></p><p class="indextabbartitle" :class="{active:indextabbarselected==1}">发现</p></div></li>
        <a >
          <li @click="tabbarclick(2)" ><div class="tabjia_fa"><img :src="middleicon" class="indextabjia" ></div></li>
        </a>
          <li @click="tabbarclick(3)" >
            <div class="indextabbardiv">
              <p class="yl-tab-nwes indextabbaricon" :class="{active:indextabbarselected==3}"></p>
              <p class="indextabbartitle" :class="{active:indextabbarselected==3}">消息</p>
              <span class="red-point" v-if="allnotreadnum>0&&allnotreadnum<10" >
                    <div class="centerreddot">{{allnotreadnum}}</div>
              </span>
              <span class="red-point reddotone" v-else-if="allnotreadnum>9&&allnotreadnum<100" >
                <div class="centerreddot">{{allnotreadnum}}</div>
              </span>
              <span class="red-point reddottwo" v-else-if="allnotreadnum>99" >
                <div class="centerreddot">{{largemsg}}</div>
              </span>
            </div>
          </li>
           <li @click="tabbarclick(4)" ><div class="indextabbardiv"><p class="yl-tab-my indextabbaricon"   :class="{active:indextabbarselected==4}"></p><p class="indextabbartitle" :class="{active:indextabbarselected==4}">我的</p></div></li>
      </ul>
      <div class="imodal " v-show="ispopshow" @click="disspop">
          <div class="jiacontainter popout">
            <img src="~img/nav-shuoshuo.png" class="ssimg" @click="publishbigsay">
            <img src="~img/nav-xianzhi.png" alt="" @click="publishreplace">
          </div>
      </div>
    </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import api from "src/api/index";
export default {
  name:"indexnavigation",
  data(){
    return{
      notreadnum: 0,
      largemsg:"99+",
      notReadLike:0,//
      notReadComment:0,//
      notreadleavemsg:0,//
      notreadrec:0,//
      notReadSysMsg:0,//
      token:localStorage.getItem('token'),
      middleicon:require("../../assets/tabjia.png"),
      ispopshow:false,//点击+为true，点击x为false
      firstjoin:true,
    }
  },
  // props:['firstjoin'],
  components: {
    api
  },
  computed: {
    ...mapState(["indextabbarselected","indexmoretopicpage","notreadmsg","allnotreadnum"])
  },
  mounted(){
    this.init();
    this.firstJion();
  },
  methods:{
    ...mapMutations(["changeindextabbarselected","changeindexmoretopicpage","changenotreadmsg","changeallnotreadnum"]),
    init(){
        if(this.indextabbarselected!=3){
          this.getUnreadData();
        }
    },
    firstJion(){
      api.queryDiscoveryjoin().then(res => {
        if(res.success){
          if(res.data.length === 0){
            this.firstjoin = true;
          }else{
            this.firstjoin = false;

          }
        }
      })
    },
    getUnreadData(){
      api.unreadCount().then(res=>{
        if(res.success){
            this.notreadleavemsg= res.data.unreadLeaveWord;
            this.notreadrec= res.data.unreadPush;
            this.notReadLike =res.data.unreadLike;
            this.notReadComment =res.data.unreadComment;
            this.notReadSysMsg =res.data.unreadSysMsg;
            this.notreadnum = res.data.unreadLeaveWord+res.data.unreadPush+res.data.unreadLike+res.data.unreadComment+res.data.unreadSysMsg;
            this.changeallnotreadnum (this.notreadnum);
            const numobj = { notReadLike:this.notReadLike, notReadComment: this.notReadComment,
                            notreadleavemsg:this.notreadleavemsg,notreadrec:this.notreadrec,notReadSysMsg:this.notReadSysMsg};
            this.changenotreadmsg(numobj);
            if(this.indextabbarselected==3){
                this.$router.replace({ path:"/message"})
            }
        }
      })
    },
    tabbarclick(index){
      localStorage.turnBackInit = 0;
      if(index!=2){
        this.changeindextabbarselected(index);
      }
      if(this.indextabbarselected!=0){
        this.changeindexmoretopicpage(1);
      }
      switch (index){
        case 0:
         this.$router.replace({ path:"/",query:{token:localStorage.getItem("token")}})
        break;
        case 1:
          const discoveryclick = {type: 16};
          this.$util.saveclicknum(discoveryclick);
          this.firstjoin?this.$router.replace({ path:"/discoveryClub"}):this.$router.replace({ path:"/discovery"})
        break;
        case 2:
        this.disspop();
        break;
        case 3:
          const messageclick = {type: 18};
          this.$util.saveclicknum(messageclick);
          this.getUnreadData();
        break;
        case 4:
          const mineclick = {type: 13};
          this.$util.saveclicknum(mineclick);
           this.$router.replace({ path:"/mine"})
        break;
        default:
        break;
      }
    },
    publishbigsay(){
         const publishbigsayclick = {type: 17};
         this.$util.saveclicknum(publishbigsayclick);
         this.$router.push({ path:"/publishbigsay",query:{tag:1}})
    },
    publishreplace(){
         const publishbigsayclick = {type: 17};
         this.$util.saveclicknum(publishbigsayclick);
         this.$router.push({ path:"/publishreplace",query:{tag:1}});
    },
    disspop(){
       this.ispopshow = !this.ispopshow;
      if(this.ispopshow==true){
        this.middleicon=require("../../assets/tab-x.png");
      }else{
        this.middleicon=require("../../assets/tabjia.png");
      }
    }
  }
}
</script>
<style lang="less" scoped>
.indextabbar{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 3000;
  height: 1rem;
  background: #ffffff;
}
.indextabbaricon{
  font-size: 0.46rem;
  color: #dbdbdb;
}
.indextabbartitle{
  font-size: 0.2rem;
  padding-top: 0.02rem;
  color: #808080;
}
.indextabjiadiv{
  display: flex;
  justify-content: center;
  width: 100%;
}
.indextabbardiv{
  position: relative;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items:center;
  -webkit-align-items: center;
  flex-direction: column;
   -webkit-flex-direction: column;
  height: 1rem;
  width: 100%;
  z-index: 4;
}
.indextabjia{
  width: 1.1rem;
  height: 1.1rem;
  /* text-align: center; */
}
.indextabbar ul{
  overflow-y: auto;
  width: 100%;
  white-space: nowrap;
  display: flex;
}
.indextabbar ul a{
  display: inline-block;
  flex: 1;
  text-align: center;
}
.indextabbar ul li{
  display: inline-block;
  width: 100%;
  flex: 1;
  text-align: center;
}
.indextabbar ul li p{
  margin: 0
}
.active{
  color: #fb685b
}
.red-point {
  position: absolute;
  border-radius:0.5rem;
  width:0.3rem;
  height:0.3rem;
  font-size: 0.18rem;
  background-color: #fa4a39;
  top: 0.05rem;
  right: 0.15rem;
}
.centerreddot{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  color: #fff
}
.reddotone{
  width:0.4rem;
  right: 0.05rem;
}
.reddottwo{
  width:0.5rem;
  right: 0;
}
.tabjia_fa{
  width: 100%;
  left: 0;
  position: fixed;
  bottom: -0.02rem;
}
.imodal {
    position: fixed; /* Stay in place */
     z-index: -1;/* Sit on top */
    left: 0;
    top: 0;
    bottom: 1rem;
    width: 100%; /* Full width */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}
.jiacontainter{
  position: fixed;
  bottom: 1.35rem;
  width: 100%;
  text-align: center;
  .ssimg{
    margin-right: 0.7rem;
  }
  img{
    width:1rem;
    height: 1rem;;
  }
}
  .popout {
      animation: popout 0.6s ease;
      -webkit-animation: popout 0.6s ease;
  }
  @keyframes popout {
      from{transform:scale(0)}
      80%{transform:scale(1.2)}
      to{transform:scale(1)}
  }
  @-webkit-keyframes popout {
      from{-webkit-transform:scale(0)}
      80%{-webkit-transform:scale(1.2)}
      to{-webkit-transform:scale(1)}
  }
</style>


